import React, { Component } from 'react'
import { CSSTransition } from 'react-transition-group';
import { connect } from 'react-redux';
import { actionCreators } from './store';
import { actionCreators as loginActionCreators } from '../../pages/login/store';
import { Link } from 'react-router-dom'
import {
    HeaderWraper,
    Logo,
    Nav,
    NavItem,
    SearchWrapper,
    NavSearch,
    SearchInfo,
    SearchInfoTitle,
    SearchInfoSwitch,
    SearchInfoList,
    SearchInfoItem,
    Addition,
    Button
} from './style';


class Header extends Component {
    // 获取热门搜索记录并渲染
    getListItem() {
        const { focus, list, page, totalPage, handleMouseEnter, handleMouseLeave, enter, handleClickChange } = this.props
        const pageList = []
        const newList = list.toJS()
        if (newList.length) {
            for (let i = (page - 1) * 10; i < page * 10; i++) {
                pageList.push(
                    <SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>
                )
            }
        }

        if (focus || enter) {
            return (
                <SearchInfo
                    onMouseEnter={handleMouseEnter}
                    onMouseLeave={handleMouseLeave}
                >
                    <SearchInfoTitle>
                        热门搜索
                            <SearchInfoSwitch onClick={() => handleClickChange(page, totalPage, this.spinIcon)}>
                            <span className='iconfont spin' ref={(icon) => this.spinIcon = icon}>&#xe851;</span>
                            换一批
                            </SearchInfoSwitch>
                    </SearchInfoTitle>
                    <SearchInfoList>
                        {pageList}
                    </SearchInfoList>
                </SearchInfo >
            )
        } else {
            return null
        }
    }
    render() {
        const { focus, handleInputFocus, handleInputBlur, list, login, logout } = this.props
        return (
            <HeaderWraper>
                <Link to='/'>
                    <Logo />
                </Link>
                <Nav>
                    <Link to='/'><NavItem className='left active'>首页</NavItem></Link>
                    <NavItem className='left'>下载App</NavItem>
                    {
                        login ? <NavItem className='right' onClick={logout}>退出</NavItem> :
                            <Link to='/login'><NavItem className='right'>登录</NavItem></Link>
                    }
                    <NavItem className='right'><span className='iconfont'>&#xe636;</span></NavItem>
                    <SearchWrapper>
                        <CSSTransition
                            classNames='slide'
                            in={focus}
                            timeout={200}
                        >
                            <NavSearch
                                className={focus ? 'focused' : ''}
                                onFocus={() => handleInputFocus(list)}
                                onBlur={handleInputBlur}
                            ></NavSearch>
                        </CSSTransition>
                        <span className={focus ? 'focused iconfont zoom' : 'iconfont zoom'}>&#xe618;</span>
                        {this.getListItem(focus)}
                    </SearchWrapper>
                </Nav>
                <Addition>
                    <Link to='/write'>
                        <Button className='writting'>
                            <span className='iconfont'>&#xe627;</span>
                            写文章
                        </Button>
                    </Link>
                    <Button className='reg'>注册</Button>
                </Addition>
            </HeaderWraper>
        )
    }

}
const mapStateToProps = (state) => {
    return {
        focus: state.get('header').get('focused'),
        list: state.get('header').get('list'),
        page: state.get('header').get('page'),
        totalPage: state.get('header').get('totalPage'),
        enter: state.get('header').get('enter'),
        login: state.get('login').get('login')
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        // 鼠标聚焦在搜索框时
        handleInputFocus(list) {
            // 获取热门搜索数据
            dispatch(actionCreators.searchFocus())
            // console.log(list)
            list.size === 0 && dispatch(actionCreators.getHotSearch())
        },
        // 鼠标在搜索框失焦时
        handleInputBlur() {
            dispatch(actionCreators.searchBlur())
        },
        // 鼠标移入热门搜索模块
        handleMouseEnter() {
            dispatch(actionCreators.mouseEnter())
        },
        // 鼠标移出热门搜索模块
        handleMouseLeave() {
            dispatch(actionCreators.mouseLeave())
        },
        // 点击换一换
        handleClickChange(page, totalPage, spinIcon) {
            let rotateDeg = spinIcon.style.transform.replace(/[^0-9]/ig, '')
            if (rotateDeg) {
                rotateDeg = parseInt(rotateDeg, 10)
            } else {
                rotateDeg = 0
            }
            console.log(rotateDeg + 360)
            spinIcon.style.transform = 'rotate(' + (rotateDeg + 360) + 'deg)'
            if (page < totalPage) {
                dispatch(actionCreators.changePage(page + 1))
            } else {
                dispatch(actionCreators.changePage(1))
            }
        },
        // 点击退出
        logout() {
            dispatch(loginActionCreators.logout())
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Header)